<template>
  <div>
    <a-card style="height: 95vh">
      <!-- 按钮 -->
      <a-row class="yy-Row">
        <a-col :span="4">
          <a-space>
            <a-button type="primary" v-has="'btn_ship_query'" @click="queryTableList">{{$t('menuItem.QueryUser')}}
            </a-button>
            <a-button type="primary" v-has="'btn_ship_export'" @click="exportExcel">{{$t('btn.export')}}
            </a-button>
            <a-button type="primary" v-has="'btn_ship_clean'" @click="cleanData">{{$t('btn.cleanAll')}}
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-row class="yy-Row">
        <!-- 查询条件 -->
        <a-form-model
            layout="inline"
            :model="queryForm"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
        >
          <a-row>
            <a-col :span="5">
              <a-form-model-item :label="$t('menuItem.LotId')">
                <a-select
                    v-model="queryForm.lotId"
                    show-search
                    :filter-option="filterOption"
                    allowClear
                    :placeholder="$t('menuItem.LotIdWarn')"
                    showArrow
                    @change="lotIdChange"
                    @search="lotIdSearch"
                >
                  <a-select-option v-for="item in lotList" :key="item.lotId">
                    {{ item.lotId }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-row>

      <a-descriptions :column="1" bordered style="width: 40%;word-break: break-all;word-wrap: break-word;">
        <a-descriptions-item  label="Company Name">
          {{capForm.customerName}}
        </a-descriptions-item>
        <a-descriptions-item  label="Customer Code">
          {{capForm.customerCode}}
        </a-descriptions-item>
        <a-descriptions-item  label="Lot ID">
          {{capForm.lotId}}
        </a-descriptions-item>
        <a-descriptions-item label="Wafer" :span="2">
          {{capForm.waferSlots}}
        </a-descriptions-item>
      </a-descriptions>

    </a-card>
  </div>
</template>

<script>
import {mapState, mapMutations} from "vuex";
export default {
  name: "ShippingSheet",
  data() {
    return{
      labelCol: {span: 7},
      wrapperCol: {span: 16},
      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
    }
  },
  computed: {
    ...mapState('ShippingSheet', ['lotList','queryForm','capForm']),
  },
  methods: {
    ...mapMutations('ShippingSheet', ['queryTableList','queryLotList','exportExcel','cleanData']),
    // 下拉框搜索
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    lotIdChange(data) {
      this.queryTableList(data)
    },
    lotIdSearch(data){
      this.queryLotList(data);
    },
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        this.windowHeight = window.fullHeight;
      })();
    };
    // 查询工号/用户名下拉框数据
    this.queryLotList()
  },
}
</script>

<style scoped>
.yy-Row {
  margin-bottom: 1rem;
}
</style>